<template>
  <!-- 秒杀组件 -->
  <div class="msbg">
    <div class="flex-s-s  top">
			<div class="topleft">
				<span class="fs-32 fw-600 color-group mr-10 ">超值拼团</span>
				<!--<span class="color-white fs-22">距离结束{{item.Days}}天{{item.Hours}}时{{item.Minutes}}分{{item.Seconds}}秒</span>-->
			</div>
			<div class="topright flex rightbg" @click="gomore()">
				<span class="fs-22 color-group mr-5">查看更多</span>
				<img class="rigthimg" src="@/assets/images/right-orange.png"  />
			</div>
		</div>
		<div class="info" v-for="(item,index) in info" :key="index">
			<imgBox :img-url="item.ThumbnailUrl410"  class="picimg" />
			<div class="inforight">
				 <p class="infoname">{{ item.ProductName }}</p>
				 <div>
						<div class=" mt-24 mb-24 specall" v-for="(iitem,index) in item.TagsList" :key="index" >
							<div class="spec ">{{ iitem.TagName }}</div>
						</div>
					  <div class="solidheight" v-if="item.TagsList.length === 0"></div>
				 </div>		 				 
				 <div class="flex pintuan">
					 <div class="pin">拼！</div>
					 <div class="tuan">{{ item.GroupCount }}人团</div>
				 </div>
				 <div class="flex-s-s mt-12">
						<div class="bleft">
							<span class="fs-24 color-primary">￥</span>
							<span class="fs-40 fw-b color-primary mr-5">{{ item.GroupPrice }}</span>
							<span class="fs-24 originprice">￥{{ item.SaleMinPrice }}</span>
						</div>
						<div class="msbtn" @click="goaction(item.ID)">立即参团</div>
				 </div>
			</div>
		</div>
  </div>
</template>

<script>
import imgBox from 'components/imgBox';
export default {
	components: {imgBox},
  name: 'Group',
  props: {
    info: {
      type: Array,
			default:[]
    },
		storeId:{
			type:String,
			default:''
		}
  },
  data() {
    return {
   
    }
  },
  methods: {
 		//查看更多
		 gomore(){
			window.location.href = this.$LocalDomain + '/m/retail/GroupIndex?storeId='+this.storeId
		},
		//立即拼团
		goaction(id){
			window.location.href = this.$LocalDomain + '/m/retail/productdetail?id='+id+'&groupType='+0+'&storeId='+this.storeId
		}
  }
}
</script>

<style lang="scss" scoped>
//秒杀
.msbg{
	background:linear-gradient(to right,#FFE69D,#FFE499);
	padding-bottom: 5px;
	border-radius: 16px;
	box-shadow: 0 4px 14px  #fff4ed;
	.top{
		height: 50px;
		line-height: 50px;
		margin:0 24px;
		padding-top: 24px;
		margin-bottom: 50px !important;
	}
	.rightbg{
		padding-left: 20px;
		padding-right: 15px;
		height: 40px;
		line-height: 40px;
		border-radius: 29px;
		background: #fff2ce;
		margin-top: 5px;
	}
	.rigthimg{
		width: 20px;
		height: 20px;
		margin-top: 10px;		
	}
}
.info{
	background: white;
	border-radius: 16px;
	height: 264px;
	margin:24px 4px 0 4px;
	padding: 24px;
	display: flex;
	.picimg{
		width: 216px;
		height: 216px;
		border-radius: 12px;
	}
}
.inforight{
	margin-left: 24px;
	.infoname{
		font-size: 26px;
		font-weight: 700px;
		width: 406px;
		height: 34px;  
		-webkit-box-orient: vertical;
		-webkit-line-clamp:1;
		text-overflow:ellipsis;
		overflow: hidden;
		white-space:nowrap;
	}
	.solidheight{
		height: 90px;
		width: 100%;
	}
	.specall{
		display: inline-flex;		
	}
	.spec{
		background: #FEF8E1 ;
		border-radius: 8px;
		padding: 8px 10px;
		color: #FE8000;
		text-align: center;
		font-size: 22px;
		margin-right: 15px;
		height: 40px;
	}
	.progress{
		margin-top: 5px;
	}
	.originprice{
		text-decoration:line-through;
		color: #B2B2B2;
	}
	.msbtn{
		background:linear-gradient(to right,#FE8224,#FF460A);
		width: 144px;
		height: 56px;
		line-height: 56px;
		border-radius: 16px;
		text-align: center;
		box-shadow: 0px 4px 14px #fff4ed;
		font-size: 24px;
		color: white;
		margin-top: -5px;
	}
}
.pintuan{
	border: 1px solid #FF5B36;;
	height: 38px;
	line-height: 38px;
	width: 140px;
	border-radius: 8px;
	margin-top: -5px;
	margin-bottom: -5px;
}
.pin{
	background: linear-gradient(to right,#FF423A,#FF9130);
	color: white;
	border-top-right-radius: 180px;
	border-bottom-right-radius: 180px;
	
	font-style: italic;
	font-size: 30px;
	font-weight: 500;
	text-align: center;
}
.tuan{
	text-align: center;
	color: #FF5B36;
	font-size: 22px;
	padding-left: 10px;
}
</style>

